<template>
  <el-main class="cc-display">
    <div class="so_middle">
      <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
      <Carousel msg="carsouel" style="margin-top: 20px" />
      <TextLine msg="经验交流" />
      <div style="width: 100%; height: 200px" class="cc-display">
        <BlockClass :textlist="experienceList[0]" style="margin-right: 1.5%" />
        <BlockClass :textlist="experienceList[1]" style="margin-right: 1.5%" />
        <BlockClass :textlist="experienceList[2]" style="margin-right: 1.5%" />
        <BlockClass :textlist="experienceList[3]" />
      </div>
      <TextLine msg="精品课程" />
      <div style="width: 100%; height: 200px" class="cc-display">
        <BlockImg :videolist="fireVide[0]" style="margin-right: 1.5%" />
        <BlockImg :videolist="fireVide[1]" style="margin-right: 1.5%" />
        <BlockImg :videolist="fireVide[2]" style="margin-right: 1.5%" />
        <BlockImg :videolist="fireVide[3]" />
      </div>
      <div style="height: 100px; width: 100%" class="cc-display">
        <ButtonImg textin="名师推荐" />
        <ButtonImg textin="直播预告" style="margin-left: 200px" />
      </div>
    </div>
  </el-main>
</template>

<script>
// @ is an alias to /src
import Carousel from "./Carousel.vue";
import TextLine from "./TextLine.vue";
import BlockClass from "./BlockClass.vue";
import BlockImg from "./BlockImg.vue";
import ButtonImg from "./ButtonImg.vue";

export default {
  name: "Home",
  components: {
    Carousel,
    TextLine,
    BlockClass,
    BlockImg,
    ButtonImg
  },
  data() {
    return {
      experienceList: [
        // 经验交流数据
        { list: [], title: "" },
        { list: [], title: "" },
        { list: [], title: "" },
        { list: [], title: "" }
      ],
      fireVide: [
        { extraii: "" },
        { extraii: "" },
        { extraii: "" },
        { extraii: "" }
      ]
    };
  },
  created() {
    this.getExperience();
    this.getFireVideo();
  },
  methods: {
    getExperience() {
      // 经验交流查询
      this.axios
        .get(`nc_search/experience`)
        .then(res => {
          if (res.data.errCode && res.data.errCode == "success") {
            this.experienceList = res.data.data;
          }
        })
        .catch(res => {
          this.$message.error("经验交流内容区查询失败！");
          console.log(res);
        });
    },
    getFireVideo() {
      // 经验交流查询
      this.axios
        .get(`nc_search/fireVideo`)
        .then(res => {
          if (res.data.errCode && res.data.errCode == "success") {
            this.fireVide = res.data.data;
          }
        })
        .catch(res => {
          this.$message.error("经验交流内容区查询失败！");
          console.log(res);
        });
    }
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-main {
  padding: 0;
}
</style>
